<template>
  <div class="wrap">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="快捷推荐" name="quickSwitch"></el-tab-pane>
      <el-tab-pane label="为您推荐" name="recommendSwitch"></el-tab-pane>
      <el-tab-pane label="贷款罗盘" name="listSwitch"></el-tab-pane>
      <el-tab-pane label="必下款" name="mustSwitch"></el-tab-pane>
    </el-tabs>
 
    <el-input placeholder="请输入产品名称" style="width:200px;" v-model="productName"></el-input>
    <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
   
    <el-table
      border fit highlight-current-row
      :data="tableData"
      style="width: 100%; margin: 15px 0 30px;">
      <el-table-column
        align="center"
        type="index"
        width="100">
      </el-table-column>
      <el-table-column
          align="center"
          label="产品"
          width="200">
          <template slot-scope="scope">
            <span>{{scope.row.productName}}</span>
          </template>
      </el-table-column>
      <el-table-column
          align="center"
          label="状态">
          <template slot-scope="scope">
            <p>{{statusMapping[scope.row.status + '']}}</p>
          </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="weight"
          label="权重">
      </el-table-column>
      <el-table-column
          align="center"
          label="结算模式|单价"
          width="200">
          <template slot-scope="scope">
            <p>{{scope.row.settlementType ? 'UV' : 'CPA'}} | {{scope.row.settlementPrice || 0}}</p>
          </template>
      </el-table-column>
      <el-table-column
        width="300"
        align="center"
        label="操作">
        <template slot-scope="scope">
            <el-button size="small" @click="setOrders(scope.row)">设置排序</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="clearfix pagination">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.pageNum"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum">
      </el-pagination>
    </div>

<!-- 页面设置 -->
    <el-dialog title="设置排序" :close-on-click-modal="false" :visible.sync="dialogVisible_set" width="30%" class="dialog2">
      <el-row class="line">
          <span class="label">产品名称</span>
          <span class="label" >{{orderSet.productName}}</span>
      </el-row>
      <el-row class="line">
           <span class="label">排序</span>
           <el-input style="width: 250px;" v-model="orderSet.weight"></el-input>
      </el-row>
    
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_set = false">取 消</el-button>
        <el-button type="primary" @click="confirmClick_set">确 定</el-button>
      </span>
    </el-dialog>

   
  </div>
</template>
<script>
  import _base from '@/services/base.js'
  import _product from '@/services/product.js'
  export default {
    components: {
    },
    data() {
      return {
        statusMapping: {
          '0': '下线',
          '1': '上线',
          '2': '禁用'
        },
        query: {
          pageNum: 1,
          pageSize: 30
        },
        totalNum: 0,
        settleOption: [{
          value: 0,
          label:'CPA'
        }, {
          value: 1,
          label:'UV'
        }],
        tableData:[{
          productName: 'huahua',
          status: 1
        }],
        dialogTitle:"",
        dialogVisible: false,
        dialogVisible_set: false,
        productName: '',
        activeName: 'quickSwitch',
        productStatus: '',
        orderSet: {
          productId: '',
          weight:'',
          listWeight: '',//贷款罗盘权重
          mustWeight: '',//必下款权重
          recommendWeight: '',//为您推荐权重
          quickWeight: '',//快捷推荐权重
          quickSwitch: false,
          recommendSwitch: false,
          listSwitch: false,
          mustSwitch: false
          
        },
        productStatusOption: [{
          value: 1,
          label:'上线'
        },{
          value: 0,
          label:'下线'
        }, {
          value: 2,
          label:'禁用'
        }],
        
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 3600 * 1000 * 24
          }
        }
      }
    },
    methods: {
      // 日期下拉选择
      dateChange(val){
        console.log('dateValue', this.pageSet.onlineTime)
      },
      // 搜索
      searchClick(){
        this.getProductOrderList()
      },
      // 切换tab标签
      handleClick(item){
        this.getProductOrderList()
      },
      
      handleSizeChange(val) {
        this.query.pageSize = val
        this.getProductOrderList()
      },
      handleCurrentChange(val) {
        this.query.pageNum = val
        this.getProductOrderList()
      },
      // 获取产品列表
      getProductOrderList(){
        let params = {
          pageNum: this.query.pageNum,
          pageSize: this.query.pageSize,
          productName: this.productName
        }
        if(this.activeName !== 'all'){
          params[this.activeName] = 1
        }
        _product.getProductOrderList(params)
        .then(res => {
          this.tableData = res.data.list
          this.totalNum = res.data.total
        })
      },
       // 产品排序
      setOrders(item){   
        this.dialogVisible_set = true
        this.dialogTitle = '排序设置'
        this.orderSet = {
          productId: item.productId,
          productName:item.productName,
          weight:item.weight
         
        }
      },
       // 产品排序设置确认
      confirmClick_set(){
        let params = this.orderSet
        if(this.activeName !== 'all'){
          params[this.activeName] = 1
        }
        _product.setOrders(params)
        .then(res => {
            this.getProductOrderList();
             this.dialogVisible_set = false
        })

      }
    },
    created(){
      this.getProductOrderList()
    }
  }
</script>
<style lang="scss" scoped>
@import '~styles/variables.scss';
.wrap{
  .avatar-uploader{
    display: inline-block;
    border-radius: 6px;
    border: 1px dotted #ccc;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }
  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }
  .add-btn{
    width: 100px;
    background: $theme-color;
    color: #fff;
    font-size: 14px;
    margin-top: 5px;
  }
  .dialog{
    .line{
        margin-bottom: 15px;
    }
    .label{
        width:100px;
        display: inline-block;
        text-align: right;
        margin-right: 5px;
        font-size: 12px;
    }
  }
  .dialog2{
    .line{
        margin-bottom: 15px;
    }
    .label{
        width:100px;
        display: inline-block;
        text-align: right;
        margin-right: 5px;
        font-size: 12px;
    }
  }
  .red{
    color: #f00;
  }
}
</style>